
<template>
    <div>
      <div class="topnav">
        <div class="left-section">
          <div class="logo">
            <img src="../assets/logoo.png" alt="Logo" />
          </div>
          <div class="title">
            <router-link to="/">《游戏策划》智慧课程</router-link>
          </div>
        </div>
        <div class="searchbox">
          <div class="container">
            <input
              class="my-autocomplete"
              v-model="searchQuery"
              placeholder="搜索..."
            />
            <button class="icon-button" @click="searchBtn">
              <img
                src="@/assets/icon-search.png"
                alt="Icon"
                class="button-icon"
              />
            </button>
          </div>
        </div>
        <div class="right-section">
          <ul class="nav-links">
            <li><router-link to="/">首页</router-link></li>
            <li v-if="!token"><router-link to="/login">登录</router-link></li>
            <li v-else class="layui-nav-item">
              <router-link to="#">个人</router-link>
              
              <dl class="layui-nav-child">
                <dd><a href="/profile">个人中心</a></dd>
                <dd v-if="user_type === 'teacher'">
                  <a href="#">教师管理</a>
                </dd>
                <dd v-else><a href="#"><router-link to="/Course-Intro">我的课程</router-link></a></dd>
                <dd><a @click.prevent="logout" href="#">账号退出</a></dd>
              </dl>
            </li>
            <li><router-link to="/beforehelp">帮助</router-link></li>
          </ul>
        </div>

      </div>
     <div class="nav"><ul>
    <li><router-link to="/" active-class="active">首页</router-link></li>
    <li>
      <router-link to="/before-course-intro" active-class="active"
        >课程介绍</router-link
      >
    </li>
    <li>
      <router-link to="/before-knowledge" active-class="active"
        >知识图谱</router-link
      >
    </li>
    

    <li>
      <router-link to="/before-ai-search" active-class="active"
        >AI搜索</router-link
      >
    </li>
  </ul></div>
      
    </div>
  </template>
  
  <script>
  import axios from '../api/axios';

  export default {
    
    name: "NavBar",
    components:{

    },
    data() {
        return {
          restaurants: [],//调用接口数据
          searchQuery: '',
          timeout:  null,
          token: null, // 初始化 token 数据为 null
          user_type: 'student' , // 初始化teacheraccount
          shouldHideContent: false,
        };
      },
      watch: {  
      $route(to) {  
        // 假设你只想在某个特定路由下隐藏内容  
        this.shouldHideContent = to.path === '/';  
      }  
    },  
    methods: {
      searchBtn() {  
        if (this.searchQuery.trim() === '') {  
          // 如果搜索查询为空，则弹出提示  
          this.$message({
            showClose: true,
            message: '搜索内容不能为空，请输入关键字！',
            type: 'error',
          });
        } else {  
          // 如果搜索查询不为空，则跳转到搜索页面  
          this.$router.push({ name: 'BeforeAISearch', query: { q: this.searchQuery } });  
        }  
      },
        
        handleSelect(item) {
          console.log(item);
        },
        getToken() {
          // 从 localStorage 中获取 token
          this.token = localStorage.getItem('token');
        },
        // 示例：带有认证信息的请求方法
        fetchDataWithAuth() {
          // 确保 token 存在
          if (!this.token) {
            console.error('Token 不存在，无法进行请求');
            return;
          }
  
          // 使用 axios 或其他请求库发送带有认证信息的请求
          axios.get('https://api.example.com/data', {
            headers: {
              Authorization: 'Bearer ' + this.token
            }
          }).then(response => {
            console.log('成功获取数据：', response.data);
          }).catch(error => {
            console.error('获取数据失败：', error);
          });
        },
        //退出登录账号
      logout() {
        // 执行退出操作，例如清除 token 和其他用户信息
        localStorage.removeItem('token');  // 清除存储的 token
        localStorage.removeItem('user_type');
        // 清除所有 localStorage 数据
        localStorage.clear();
        // 可以在这里执行其他清理工作，例如重定向到登录页等
        // 示例：重定向到登录页面
        //this.$router.push('/login');
        // 刷新页面
        window.location.reload();
      },
  
      },
      
      
      mounted() {
        
        this.getToken(); // 获取 token
        this.user_type = localStorage.getItem('user_type');
      }
      }
    
  </script>
  
  <style scoped>
  .topnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px;
    background-color: rgba(36, 41, 47, 1);
    padding: 0 20px;
  }
  .layui-nav-child {
    display: none; /* 初始状态隐藏 */
    position: absolute;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 170px;
    padding: 10px 0;
    border-radius: 5px; /* 添加圆角 */
  }
  .layui-nav-item {
    height: 40px;
    font-weight: 80px;
  }
  /* 显示子菜单 */
  .layui-nav-item:hover .layui-nav-child {
    display: block;
  }
  .layui-nav-child dd {
    margin: 0;
    white-space: nowrap;
    border-bottom: 1px solid #ccc; /* 添加上边框作为分割线 */
    padding: 5px 0; /* 调整分割线上方的空白 */
  }
  
  .layui-nav-child dd a {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
  }
  
  .layui-nav-child dd a:hover {
    color: #007bff;
    background-color: #f2f2f2;
    width: 140px;
  }
  
  /* 当前选中项样式 */
  .layui-nav-child .layui-this {
    /* background-color: #f2f2f2; */
    color: #007bff;
    margin: 0;
  }
  .nav {
    margin-left: 150px;
    margin-right: 150px;
    background-color: rgba(59, 150, 255, 1);
  }
  
  .nav ul {
    list-style: none;
    display: flex;
    padding: 0;
    align-items: center;
    margin: 0;
    margin-top: 5px;
  }
  
  .nav li {
    width: 120px;
    height: 50px;
    align-items: center;
    justify-content: center;
    list-style: none;
    background-color: rgba(59, 150, 255, 1);
  
  }
  
  .nav a {
    text-decoration: none;
    color: white;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 50px;
    font-size: 16px;
  }
  
  .nav li:hover {
    background-color: rgba(130, 188, 255, 1);
  }
  .searchbox {
    margin-left: 300px;
    height: auto;
    width: 400px;
  }
  .container {
    position: relative;
    margin-left: 180px;
    height: auto;
    width: 150px;
  }
  .my-autocomplete {
    position: relative; /* 确保.icon-button可以相对于它定位 */
    width: 200px;
    height: 32px;
    opacity: 1;
    border-radius: 60px;
    background: rgba(255, 255, 255, 1);
    border: none;
    padding: 2px;
    display: inline-block; /* 如果你想要这个元素表现得像一个内联块元素 */
    padding-left: 15px;
    outline: none;
  }
  
  .icon-button {
    position: absolute;
    top: 50%; /* 相对于父元素顶部偏移50% */
    transform: translateY(-50%); /* 向上移动自身高度的50%，实现垂直居中 */
    border: none;
    outline: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    margin-left: 105px;
  }
  .button-icon {
    width: 100%;
    height: auto;
    display: block;
  }
  .icon-button:hover {
    filter: brightness(90%);
  }
  .active {
    background-color: rgba(130, 188, 255, 1);
    color: white;
  }
  
  .left-section {
    display: flex;
    align-items: center;
  }
  
  .logo {
    width: 90px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-left: 130px;
    margin-top: 20px;
  }
  
  .logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }
  
  .title {
    margin-left: 10px;
  }
  
  .right-section {
    display: flex;
    align-items: center;
  }
  
  .nav-links {
    list-style: none;
    padding: 0;
    margin-right: 130px;
    display: flex;
  }
  
  .nav-links li:not(:last-child)::after {
    content: "|";
    color: white;
    margin-left: 8px;
  }
  
  a {
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
    font-size: 18px;
  }
  </style>